<template>
  <div>
    <div class="tab">
      <el-tabs v-model="queryParams.status" @tab-click="changeOption">
        <el-tab-pane :label="item.label + `(${item.num})`" :name="item.name" :key="item.name" v-for="item in statusList"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="content">
      <div class="table">
        <el-table
          border
          :data="tableData"
          v-loading="loading"
        >
          <el-table-column
            prop="agentNickname"
            label="结算代理"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="startDate"
            label="结算周期"
            min-width="150"
            align="center"
          >
            <template v-slot="{row}">
              {{row.startDate}} - {{row.endDate}}
            </template>
          </el-table-column>
          <el-table-column
            prop="containerNum"
            label="总货柜数"
            min-width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            v-for="item in costList"
            :key="item.id"
            :prop="'costId' + item.id"
            :label="item.costName"
            align="center"
            min-width="100"
          >
            <template v-slot="{row}">
              <template v-if="row['costId' + item.id] !== undefined">
                {{row['costId' + item.id]}}
              </template>
              <template v-else>
                -
              </template>
            </template>
          </el-table-column>
          <el-table-column
            prop="totalFee"
            label="总结算费用（元）"
            min-width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="结算状态"
            min-width="150"
            align="center"
          >
            <template v-slot="{row}">
              {{row.status === 1 ? '已结算' : '未结算'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="op"
            label="操作"
            min-width="200"
            align="left"
          >
            <template v-slot="{row}">
              <template v-if="row.status === 0">
                <el-button type="danger" @click="finishRow(row)">结算</el-button>
              </template>
              <template v-else-if="row.status === 1">
                <el-button type="warning" @click="unFinishRow(row)">未结算</el-button>
              </template>
              <el-button type="view" @click="jumpInfo(row)">查看</el-button>
              <el-button type="primary" @click="exportExcel(row)">导出</el-button>
              <template v-if="row.status === 0">
                <el-button type="danger" @click="delRow(row)">删除</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-wrap">
        <el-pagination
          @current-change="getData"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "AgentPaymentView",
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        status: 'all',
      },
      statusList: [
        {label: '未结算', name: 'settling', text: '', num: 0,},
        {label: '已结算', name: 'settled', text: '', num: 0,},
        {label: '全部', name: 'all', text: '', num: 0,},
      ],
      tableData: [],
      loading: false,
      total: 0,
      costList: [],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(){
      request({
        url: '/finance/getPaymentContainerList',
        params: this.queryParams
      })
        .then(res=>{
          this.total = res.info.total
          this.tableData = res.data
          this.costList = res.info.costList
          this.statusList.forEach(item=>{
            res.info.statusNum.some(ii=>{
              if(ii.status === item.name){
                item.num = ii.num
                return true
              }
            })
          })
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData();
    },
    jumpInfo(row){
      this.$router.push({name: 'financeContainerInfo', query: {id: row.id}})
    },
    delRow(row){
      this.$confirm('','确定要删除这条数据吗？')
        .then(res=>{
          request({
            url: `/finance/delPaymentContainer/${row.id}`,
            method: 'delete',
            handleError: true,
          })
            .then(res=>{
              if(res.error === 0){
                this.$sMsg(res.message)
                this.getData()
              }else{
                this.$eMsg(res.message)
              }
            })
        })
        .catch(()=>{})
    },
    finishRow(row){
      this.$confirm('', '确定已结算？')
        .then(res=>{
          request({
            url: `/finance/finishPaymentContainer/${row.id}`,
            method: 'patch',
            handleError: true
          })
            .then(res=>{
              if(res.error === 0){
                this.$sMsg(res.message)
                this.getData()
              }else{
                this.$eMsg(res.message)
              }
            })
        })
        .catch(()=>{})
    },
    unFinishRow(row){
      this.$confirm('', '确定将数据变回未结算状态？')
        .then(()=>{
          request({
            url: `/finance/settlingPaymentContainer/${row.id}`,
            method: 'patch',
            handleError: true
          })
            .then(res=>{
              if(res.error === 0){
                this.$sMsg(res.message)
                this.getData()
              }else{
                this.$eMsg(res.message)
              }
            })
        }).catch(()=>{})
    },
    exportExcel(row){
      request({
        url: `/finance/exportFinanceContainerPayment`,
        method: 'get',
        params: {
          id: row.id
        }
      })
        .then(res=>{
          window.open(res.data.excelPath,"_blank");
        })
    }
  },

}
</script>


<style scoped lang="scss">

</style>
